<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2987357_gcyfazmwjx.css">
    <link rel="stylesheet" href="../css/reset.css">

    <link rel="stylesheet" href="../css/reg/reg.css">
</head>

<body>
    <div class="oiwas_layout">
        <header>
            <div class="marquee">
                <div class="marqueeCon w">

                    <div class="mar_left">
                        <em class="iconfont icon-laba"></em>
                        <span>最新公告：</span>
                    </div>

                    <div id="scroll_div" class="fl">
                        <div id="scroll_begin">
                            注册得200元礼遇，先到先得！
                        </div>
                        <div id="scroll_end"></div>
                    </div>


                    <div class="mar_right">
                        <img src=""
                            alt="">
                    </div>


                </div>
            </div>
            <div class="main">
                <div class="nav w">
                    <h1>
                        <a href="">
                            <img src="http://api.oiwas.com/upload/admin_upload/20210607/f7de14d1306faeac77ac89b339c47380.png"
                                alt="">
                            <span class="fans">粉丝数：36.8万</span>
                        </a>
                    </h1>

                    <div class="nav_right">
                        <div class="search">
                            <input type="text">
                            <em class="iconfont icon-fangdajing"></em>
                        </div>

                        <div class="nav_font">
                            <a href="">在线客服</a>
                            <a href="">查找店铺</a>
                            <a href="./login.html">登录</a>
                            <a href="">
                                <em class="iconfont icon-gouwudai"></em>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column ">
                    <ul class="w nav_list">
                        <li>
                            <span>首页</span>

                        </li>

                        <li>
                            <span>拉杆箱</span>
                            <ul class="hover_nav_list">
                                <li><a href="">商场同款</a></li>
                                <li><a href="">休闲通勤</a></li>
                                <li><a href="">可乐联名</a></li>
                            </ul>
                        </li>

                        <li>
                            <span>史努比</span>
                        </li>

                        <li>
                            <span>双肩包</span>
                            <ul class="hover_nav_list">
                                <li><a href="">商务背包</a></li>
                                <li><a href="">休闲背包</a></li>
                                <li><a href="">可乐联名</a></li>
                                <li><a href="">KiM潮牌</a></li>
                            </ul>
                        </li>

                        <li>
                            <span>象象包</span>

                        </li>

                        <li>
                            <span>快乐象家庭</span>
                            <ul class="hover_nav_list">
                                <li><a href="">时尚妈咪包</a></li>
                                <li><a href="">Q萌童包</a></li>
                            </ul>
                        </li>

                        <li>
                            <span>新品专区</span>
                        </li>

                        <li>
                            <span>品牌故事</span>
                        </li>

                        <li>
                            <span>爱华仕大广赛</span>
                        </li>

                        <li>
                            <span>招商加盟</span>
                            <ul class="hover_nav_list">
                                <li><a href="">分销招商</a></li>
                                <li><a href="">礼品合作</a></li>
                                <li><a href="">百货加盟</a></li>
                                <li><a href="">售后服务</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </header>



        <div class="page">
            <div class="wrap">
                <div class="reg">
                    <div class="loginContent">
                        <div class="loginright">
                            <div class="logintitle">
                                <h2>注册账号</h2>
                            </div>

                            <div class="loginval">
                                <div class="loginTab">
                                    <div class="first">
                                        <input type="text" name="" id="phone" class="username" placeholder="用户名">
                                    </div>

                                    <div class="loginyz">
                                        <div id="drag"></div>
                                    </div>

                                    <div class="rand_code">
                                        <input type="text" placeholder="随机验证码" class="oInp_code">
                                        <div class="get_code">
                                            <p>获取验证码</p>
                                        </div>
                                    </div>

                                    <div class="code">
                                        <input type="password" placeholder="用户密码" class="password">
                                    </div>


                                    <div class="icon">
                                        <i class="" id="remeber"></i>
                                        <span>我已阅读并同意爱华仕商城用户会员规则</span>
                                    </div>

                                    <div class="icon">
                                        <i class="" id="sremeber"></i>
                                        <span>我已阅读并同意爱华仕商城<a href="">隐私规则</a>和<a href="">会员条款</a></span>
                                    </div>


                                    <div class="btn" id="buttonReg">
                                        注册<span>→</span>
                                    </div>

                                    <a href="" class="forget">返回</a>



                                </div>
                            </div>

                            <div class="thridlogin">
                                <p class="thirdTit">
                                    使用其他方式登录
                                </p>

                                <ul class="listInline">
                                    <li>
                                        <a href="">
                                            <img src="../image/02.png" alt="">
                                        </a>
                                    </li>

                                    <li>
                                        <a href="">
                                            <img src="../image/03.png" alt="">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="v" onclick="xcsoft.info('请填写你的相关信息哟',1000)">
            </div>

        </div>




        <div class="footer">

            <div class="addren">
                <div class="w">
                    <ul>
                        <li>联系我们</li>
                        <li>热线电话：400-887-3868</li>
                        <li>总机：0752-7832299</li>
                        <li>地址：广东省惠州市惠城区演达大道花边岭南花园1-3F</li>
                    </ul>
                </div>
            </div>

            <div class="fot_list">
                <div class="list_top w">
                    <ul class="nav">
                        <li>
                            <dl>
                                <dt>产品目录</dt>

                                <dd>拉杆箱</a></dd>
                                <dd>史努比</a></dd>
                                <dd>双肩包</a></dd>
                                <dd>象象包</a></dd>
                                <dd>快乐象家庭</a></dd>
                                <dd>新品专区</a></dd>
                                <dd>爱华仕大广赛</a></dd>
                                <dd>招商加盟</a></dd>
                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>招商加盟</dt>

                                <dd>分销招商</dd>
                                <dd>礼品合作</dd>
                                <dd>百货加盟</dd>
                                <dd>售后服务</dd>
                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>关于爱华仕</dt>
                                <dd>品牌故事</dd>
                                <dd>企业介绍</dd>
                                <dd>查找门店</dd>
                                <dd>意见反馈</dd>

                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>我的账号</dt>
                                <dd>订单列表</dd>
                                <dd>账户资料</dd>
                                <dd>我的购物车</dd>
                            </dl>
                        </li>



                        <li>
                            <dl>
                                <dt>友情链接</dt>
                                <dd>天猫爱华仕旗舰店</dd>
                                <dd>爱华仕京东自营旗舰店</dd>
                                <dd>爱华仕官方旗舰店</dd>
                                <dd>爱华仕女包京东旗舰店</dd>
                            </dl>
                        </li>
                    </ul>

                    <div class="contact">
                        <ul>
                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/0ab234e.jpg" alt="">
                                <p>微博自媒体</p>
                            </li>

                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/1da4f69.jpg" alt="">
                                <p>微信公众号</p>
                            </li>


                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/252623a.jpg" alt="">
                                <p>微信小程序</p>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="list_btm">
                    <div class="w">

                        <div class="second_five">
                            <em class="iconfont icon-zhongguo"></em>
                            <span class="zh">
                                中国
                            </span>

                            <ul>
                                <li>隐私声明</li>
                                <li>|</li>
                                <li>使用条款</li>
                                <li>|</li>
                                <li>网站地图</li>
                            </ul>

                        </div>

                        <a href="">
                            Copyright @ 2007-2017 OIWS.All rights reserved. 粤ICP备17107696号
                        </a>
                    </div>
                </div>
            </div>

            <a href="javascript:;" class="pos_a" id="goback">
                <em class="iconfont icon-shangyi"></em>
            </a>
        </div>

    </div>



    <script src="../js/jquery.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/api.js"></script>
    <script>



        // 轮播图
        const b = new Banner('.banner');
        b.autoPlay()
        b.init()

        // 返回顶部
        retrun_top()

        // 公告栏
        ScrollImgLeft();



        $('#drag').drag();

        $('#buttonReg').on('click', function () {

            let flag1, flag2, flag3, flag4 = false;


            // 用户名
            const username = $('.username').val()
            const re = /^\w{6,20}$/g;
            const rez = re.test(username);

            if (username === '') {
                $('.xctips').css('background-color', '#fef0f0')
                xcsoft.info('用户名不能为空', 1000)
                flag2 = false
                return
            }

            if (rez == false) {
                $('.xctips').css('background', '#fef0f0')
                xcsoft.info('用户名长度在6-20个字符以内', 1000)
                flag2 = false
                return
            }

            flag2 = true;




            // 滑块
            console.log($('.drag_bg').css('background'));
            if (!($('.drag_bg').css('background-color') == 'rgb(51, 204, 51)')) {
                $('.xctips').css('background', '#fef0f0')
                xcsoft.info('请拖动滑块', 1000)
                return
            }

            flag1 = true;




            // 验证码
            if (!($('.get_code p').html().toLowerCase() === $('.oInp_code').val().toLowerCase())) {
                console.log('===================111');
                $('.xctips').css('background', '#fef0f0')
                xcsoft.info('验证码输入错误', 1000)
                flag4 = false;
                return
            }
            flag4 = true




            // 密码
            const password = $('.password').val()
            var re2 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,12}$/g;  //密码必须有大小写字母和数字且6-20位
            var rez2 = re2.test(password);

            if (password === '') {
                $('.xctips').css('background', '#fef0f0')
                xcsoft.info('密码不能为空', 1000)
                flag3 = false
                return
            }

            if (rez2 == false) {
                $('.xctips').css('background', '#fef0f0')
                xcsoft.info('请输入6-12位密码(必须有大小写及数字)', 1000)
                flag3 = false
                return
            }

            flag3 = true;






            if ($('#remeber').hasClass('iactive')) {
                flag5 = true

            } else {

                flag5 = false;
                $('.xctips').css('background', '#fef0f0')
                xcsoft.info('请勾选会员规则', 1000)
                return
            }




            if ($('#sremeber').hasClass('iactive')) {
                flag6 = true
            } else {
                flag6 = false;
                $('.xctips').css('background', '#fef0f0')
                xcsoft.info('请勾选隐私规则和会员条款', 1000)
                return
            }



            if (flag1 && flag2 && flag3 && flag4 && flag5 && flag6) {

                const username = $('.username').val();
                const password = $('.password').val();

                getAjaxData()

                async function getAjaxData() {

                    const res = await reg({
                        
                        username,
                        password

                    });

                    if (res.status) {
                        location.href = './login.html'
                    } else {
                        alert(res.msg)
                    }

                }

                // $('.loginTab').delegate(".btn", "click", function () {
                //     $(".xctips").addClass("igreen");
                // });
                // xcsoft.info('注册成功', 1000);
            }
        })
















        // 用户名
        $(".username").on("input", function () {

            const username = $('.username').val()
            const re = /^\w{6,20}$/g;
            const rez = re.test(username);

            if (username === '') {
                xcsoft.info('用户名不能为空', 1000)
                flag2 = false
                return
            }

            if (rez == false) {
                xcsoft.info('用户名长度在6-20个字符以内', 1000)
                flag2 = false
                return
            }

            flag2 = true;
            // if (flag1 && flag2 && flag3 && flag4 && flag5 && flag6) {
            //     xcsoft.info('可以注册', 1000);
            // }

        });


        // 滑动验证
        let flag1, flag2, flag3, flag4 = false;



        // 密码
        $(".password").on("input", function () {
            const password = $('.password').val()
            var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,12}$/g;  //密码必须有大小写字母和数字且6-20位
            var rez = re.test(password);

            if (password === '') {
                xcsoft.info('密码不能为空', 1000)
                flag3 = false
                return
            }

            if (rez == false) {
                xcsoft.info('请输入6-12位密码(必须有大小写及数字)', 1000)
                flag3 = false
                return
            }

            flag3 = true;

        });


        // 验证码

        $('.get_code').on('click', function () {

            $('.get_code p').html(randomCode(6));
        })


        $(".oInp_code").on("input", function () {

            if (!$('.get_code p').html().toLowerCase() === $('.oInp_code').val().toLowerCase()) {
                xcsoft.info('验证码输入错误', 1000)
                flag4 = false;
                return
            }
            flag4 = true;

        });








        // 对勾2
        $('#sremeber').on('click', function () {
            if ($(this).hasClass('iactive')) {
                flag5 = false
                $(this).removeClass('iactive')
            } else {

                $(this).addClass('iactive')
                flag5 = true;
            }
        })



        // 对勾1
        $('#remeber').on('click', function () {
            if ($(this).hasClass('iactive')) {
                flag6 = false
                $(this).removeClass('iactive')
            } else {
                $(this).addClass('iactive')
            }
        })








    </script>

</body>

</html>